import React, { Children } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, BrowserRouter, Link, Route, NavLink, withRouter, Switch, Redirect } from 'react-router-dom'
//Link 类似于vue的 router-link
// Route 类似于vue的 router-view
function Child(props) {
  console.log(props);
  return <h2>children</h2>
}
Child = withRouter(Child);//这个APi可以让对应的组件能够获取到对应的路由参数
/* 
  query传参 
  params传参
  state 在history模式下  刷新时不会丢失的

*/
let Home = function (props) {
  // 之所以props里边由路由相关的参数 是因为这个组件是由Route渲染出来的
  console.log(props)
  return <>
    <h1 onClick={() => { props.history.push('/list/888') }}>HOME</h1>
    <Route path="/home/child" component={Child}></Route>
  </>
}
let List = function (props) {
  console.log(props)
  return <h1>List</h1>
}
class App extends React.Component {

  render() {
    return <div className=''>
      {/* <NavLink to='/home?ww=2134'>home</NavLink> */}
      <NavLink to={{ pathname: "/home", state: { qq: 123 } }}>home</NavLink>
      <NavLink to='/list/66'>list</NavLink>
      <Switch>
        <Route path='/home' component={Home}></Route>
        <Route path='/list/:qq' component={List}></Route>
        <Redirect path='/*' to='/home'></Redirect>
        {/* <Route path='/*' render={() => <h1>404</h1>}></Route> */}
        {/* 当页面的路径匹配 /list的时候  上边的这个Route组件就会渲染List */}
      </Switch>
    </div>;
  }
}

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>, document.getElementById('root'))